<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <link rel="stylesheet" href="/testbed/styles.css" />
  <title>Testbed for Planck.js</title>
</head>

<body>
  <div class="center">
    <div class="header">
      <table class="control">
        <tr>
          <td>
            <a id="testbed-play" class="pause"><span class="pause">Pause</span><span class="play">Play</span></a>
          </td>
          <td>
            <a id="testbed-reload">Reload</a>
          </td>
          <td>
            <a id="testbed-prev">Prev</a>
          </td>
          <td>
            <a id="testbed-next">Next</a>
          </td>
          <td>
            <select id="testbed-select">
              <option selected disabled hidden value=''>Select...</option>
            </select>
          </td>
        </tr>
      </table>
      <h3 class="title">Planck.js</h3>
    </div>
    <canvas id="stage"></canvas>
    <div class="output">
      <div id="testbed-status"></div>
      <div id="testbed-info"></div>
    </div>
  </div>
  <script type="module">
    const url = new URL(document.location.toString());
    const file = url.searchParams.get("example");
    import('/example/' + file + '.ts');
  </script>
  <script type="module">
    import list from '/example/list.json';
    {
      const reloadButton = document.getElementById('testbed-reload');
      const listSelect = document.getElementById('testbed-select');
      const nextButton = document.getElementById('testbed-next');
      const prevButton = document.getElementById('testbed-prev');

      reloadButton.addEventListener('click', function () {
        window.location.reload();
      });

      listSelect.addEventListener('change', function () {
        window.location.href = this.options[listSelect.selectedIndex].value;
      });

      for (const example of list) {
        const option = document.createElement('option');
        option.value = '?example=' + example;
        option.innerHTML = example;
        option.selected = window.location.search.indexOf("=" + example) > -1;
        listSelect.appendChild(option);
      }

      nextButton.addEventListener('click', function () {
        playNext(+1);
      });

      prevButton.addEventListener('click', function () {
        playNext(-1);
      });

      function playNext(step) {
        const nextIndex = (listSelect.selectedIndex + step + listSelect.options.length) % listSelect.options.length;
        const nextOption = listSelect.options[nextIndex];
        if (nextOption && nextOption.value) {
          window.location.href = nextOption.value;
        }
      }
    }
  </script>
</body>

</html>